<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- <script src="./src/index.js"></script> -->
  <!-- <script src="./dist/main.js"></script> -->

  <button index='0'>01</button>
  <button index='1'>02</button>
  <button index='2'>03</button>

  <script>
    // let btns = document.querySelectorAll("button");
    // for (let i = 0; i < btns.length; i++) {
    //   btns[i].index = i;
    //   btns[i].onclick = function () {
    //     console.log(this.index)
    //   }
    // }

    document.body.onclick = ev => {
      let target = ev.target,
        TAG = target.tagName,
        key = target.getAttribute("index");
      if (TAG === 'BUTTON') {
        console.log(key)
      }
    }

  </script>
</body>

</html>